<template>
  <div>
    <v-dialog ref="checkRef" title="核算" :show.sync="dialogVisible" :modalAppendToBody="false" @beforeClose="beforeClose" width="1200px">
      <div class="card-box">
        <div>待生成其它款项</div>
        <el-table :data="tableData" align="left">
          <el-table-column prop="costMonth" label="账单月份" sortable width="180">
            <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
          </el-table-column>
          <!-- <el-table-column prop="roomCode" label="物业名称" sortable width="180"/> -->
          <el-table-column prop="chargeProjectName" label="收费项目"></el-table-column>
          <el-table-column prop="costPeriodStart" label="费用周期">
            <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
          </el-table-column>
          <el-table-column prop="receivableDate" label="应付日期" />
          <el-table-column prop="receivableMoney" :formatter="priceFormatter" label="应付金额(元)" />
        </el-table>
        <div>待生成租金</div>
        <el-table
          :data="tableData1"
          style="width: 100%;margin-bottom: 20px;"
          row-key="receivableId"
          :default-expand-all="false"
          :tree-props="{children: 'receivableList', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="costMonth" label="费用月份" sortable width="180">
            <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
          </el-table-column>
          <!-- <el-table-column prop="projectName" label="物业名称" sortable width="180"/> -->
          <el-table-column prop="chargeProjectName" label="收费项目" />
          <el-table-column prop="costPeriodStart" label="费用周期">
            <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
          </el-table-column>
          <el-table-column prop="receivableDate" label="应付日期" />
          <el-table-column prop="receivableMoney" :formatter="priceFormatter" label="应付金额(元)" />
        </el-table>

        <div>已生成费用</div>
        <el-table :data="tableData2" style="width: 100%;margin-bottom: 20px;">
          <el-table-column prop="costMonth" label="费用月份" sortable width="180">
            <template slot-scope="scope">{{scope.row.costMonth|shortMonth}}</template>
          </el-table-column>
          <!-- <el-table-column prop="projectName" label="物业名称" sortable width="180"/> -->
          <el-table-column prop="chargeProjectName" label="收费项目" />
          <el-table-column prop="costPeriodStart" label="费用周期">
            <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
          </el-table-column>
          <el-table-column prop="receivableDate" label="应付日期" />
          <el-table-column prop="receivableMoney" :formatter="priceFormatter" label="应付金额(元)" />
        </el-table>
      </div>
      <div>
        <p>注：确认合同准确无误，点击审核通过生成合同应付；如果合同有误，点击退回租赁合同。</p>
      </div>
      <span slot="foot">
        <el-button size="small" @click="returned">退回合同</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="account">审核通过</el-button>
        <!--<el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="commit">提 交</el-button>-->
      </span>
    </v-dialog>
  </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import { check, checkSubmit, generateProFee, fetchList } from '@/views/wy-rent/api/rent-contract-acceptance.js'

import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import { mapState } from 'vuex'
export default {
  mixins: [BaseLoad],
  components: { engineerList },
  data () {
    return {
      dialogVisible: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      form: {
        remarks: "",
        busId: "",
        category: 2,
      },
      dialogVisible1: false
    }
  },

  methods: {
    show (item) {
      this.dialogVisible = true
      setTimeout(() => {
        if (item) {
          //console.log(item)
          this.form.busId = item.rentContractId

          generateProFee(item.rentContractId).then(res => {
            // this.construction=res.data.data
            this.tableData = res.data.data
          });

          check(item.rentContractId).then(res => {
            // this.construction=res.data.data
            //alert(JSON.stringify(res.data.data));
            this.tableData1 = res.data.data
          });


          //已生成费用
          fetchList({ rentContractId: item.rentContractId, size: 200 }).then(
            (res) => {
              this.tableData2 = res.data.data.records;
              //alert(JSON.stringify(this.tableData2))
            }
          )
        }
      }, 200)

    },
    /*commit() {
        this.$refs.editForm.validate(valid => {

        })
    },
    beforeUpload() {
        this.loadAction('请稍等...')
    },
    receive() {
        this.$message('合同已确认接收！');
        this.dialogReceiveVisible = false;
        this.flag = true;
        this.btnText = "已接收";
        this.operText = "核算";
        console.log(this.flag);
    },*/
    returned () {
      this.$prompt('请填写退回原因', '退回原因', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '退回原因不能为空'
      }).then(({ value }) => {
        this.form.remarks = value
        const obj = {
          approvalResult: '03',
          opinion: '退回'
        }
        checkSubmit({ ...this.form, ...obj }).then(resp => {
          if (resp.data.data) {
            this.$message({
              type: 'success',
              message: '合同已退回经营部！'
            });
            this.dialogVisible = false;
            this.$emit('resetList')
            this.$emit('getTabListData')
            this.$forceUpdate()
          } else {
            this.err('操作失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    account () {
      // console.log(this.$refs.checkRef)
      this.dialogVisible1 = true
      this.$confirm('是否确定合同数据已通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadAction('请稍等...')
        const obj = {
          approvalResult: '02',
          opinion: '同意'
        }
        checkSubmit({ ...this.form, ...obj }).then(resp => {
          if (resp.data.data) {
            this.$message({
              type: 'success',
              message: '合同数据已审核通过！'
            });
            this.dialogVisible = false;
            this.$emit('resetList')
            this.$emit('getTabListData')
            this.loadClose()
          } else {
            this.err('操作失败')
            this.loadClose()
          }
        })
      }).catch((e) => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    beforeClose (done) {
      done();
    }
  }
}
</script>

<style scoped lang='scss'>
@include data-title();

@include info-list(2);
@include formWrap(3);
</style>
